<template>
	<view>
		<view class="head">
			<text>请添加您的需求</text>
			<text>选出您的所有忌口项，使您的配餐更舒心<br>(可多选)</text>
		</view>
		<view class="message">
			<textarea placeholder="在此添加您的留言" v-model="message"></textarea>
		</view>
		<view class="category-wrapper">
			<view class="item" :class="{'check': check_material_ids.indexOf(item.id) >= 0}" v-for="(item, index) in materials"
			 :key="index" @click="materialClick(item)">
				<text>{{item.title}}</text>
			</view>
			<i></i>
			<i></i>
			<i></i>
		</view>
		<view class="btn show" @click="submit">
			<text>确定</text>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				materials: [],
				check_material_ids: [],
				message: ''
			};
		},
		onLoad(o) {
			o.check_material_ids = JSON.parse(o.check_material_ids)
			if ('check_material_ids' in o) {
				this.check_material_ids = o.check_material_ids;
				this.message = o.message;
			}
			console.log(o);
		},
		mounted() {
			this.getData()
		},
		onUnload() {
			uni.$emit('food_needs_submit', {})
		},
		methods: {
			getData: function() {
				this.$api.special()
					.then(res => {
						console.log(res);
						this.materials = res.data
					})
					.catch(err => {

					})
			},
			materialClick: function(item) {
				if (this.check_material_ids.indexOf(item.id) >= 0) {
					for (let key in this.check_material_ids) {
						if (this.check_material_ids[key] == item.id) {
							this.check_material_ids.splice(key, 1)
							break;
						}
					}
					return false;
				}

				this.check_material_ids.push(item.id)
			},
			submit: function() {
				uni.$emit('food_needs_submit', {
					data: {
						check_material_ids: this.check_material_ids,
						message: this.message
					}
				})
			}
		}
	}
</script>
<style lang="scss">
	page {
		background: #fff;
	}

	.head {
		padding-top: 40rpx;
		display: flex;
		flex-flow: column;
		align-items: center;

		&>text:nth-child(1) {
			color: #2E2E2E;
			font-size: 50rpx;
		}

		&>text:nth-child(2) {
			color: #777777;
			font-size: 22rpx;
			text-align: center;
		}
	}

	.message {
		margin: 40rpx 64rpx 60rpx;
		border: 1rpx solid #CCCCCC;
		background: #FAFAFA;
		text-align: center;

		textarea {
			margin: 0 auto;
			padding: 20rpx 0;
			width: 80%;
			height: 140rpx;
			font-size: 28rpx;
		}
	}

	.category-wrapper {
		margin: 0 64rpx;
		display: flex;
		flex-flow: row wrap;
		justify-content: space-between;

		.item {
			margin-bottom: 40rpx;
			flex: 0 0 194rpx;
			width: 194rpx;
			height: 66rpx;
			background: #F3F7F7;
			border-radius: 33rpx;
			text-align: center;

			text {
				color: #3D3D3D;
				font-size: 28rpx;
				line-height: 66rpx;
			}

			&.check {
				background: #DFBB50;

				text {
					color: #FFFFFF;
					font-weight: 500;
				}
			}
		}

		i {
			flex: 0 0 194rpx;
		}
	}

	.btn {
		margin: 80rpx auto 0;
		width: 676rpx;
		height: 86rpx;
		background: #F5F5F5;
		border-radius: 43rpx;
		text-align: center;

		text {
			color: #BBBCC2;
			font-size: 28rpx;
			line-height: 86rpx;
		}

		&.show {
			background: #DFBB50;

			text {
				color: #FFFFFF;
			}
		}
	}
</style>
